import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { Activity, Thermometer, Eye, Heart, Pill, Stethoscope, Bandage, SquareCheckBig, Grid3X3 } from 'lucide-react';
import { Link } from 'react-router-dom';

export const CategoriesPage = () => {
  useDocumentTitle('Product Categories');
  
  const allCategories = [
    {
      icon: <Activity size={32} className="text-[#5cb8b2]" />,
      title: 'Blood Pressure Monitors',
      description: 'Accurate devices to monitor your heart health at home',
      link: '/categories/blood-pressure-monitors'
    },
    {
      icon: <Stethoscope size={32} className="text-[#5cb8b2]" />,
      title: 'Nebulizers',
      description: 'Reliable respiratory therapy for all ages',
      link: '/categories/nebulizers'
    },
    {
      icon: <SquareCheckBig size={32} className="text-[#5cb8b2]" />,
      title: 'Mobility Aids',
      description: 'Support for independence and safe movement',
      link: '/categories/mobility-aids'
    },
    {
      icon: <Bandage size={32} className="text-[#5cb8b2]" />,
      title: 'First Aid Kits',
      description: 'Essential supplies for emergency preparedness',
      link: '/categories/first-aid'
    },
    {
      icon: <Thermometer size={32} className="text-[#5cb8b2]" />,
      title: 'Digital Thermometers',
      description: 'Fast and accurate temperature readings',
      link: '/categories/thermometers'
    },
    {
      icon: <Eye size={32} className="text-[#5cb8b2]" />,
      title: 'Vision Care',
      description: 'Products to support eye health and comfort',
      link: '/categories/vision-care'
    },
    {
      icon: <Heart size={32} className="text-[#5cb8b2]" />,
      title: 'Heart Rate Monitors',
      description: 'Track your cardiac health during rest and activity',
      link: '/categories/heart-rate-monitors'
    },
    {
      icon: <Pill size={32} className="text-[#5cb8b2]" />,
      title: 'Medication Management',
      description: 'Tools to organize and track medications',
      link: '/categories/medication-management'
    }
  ];
  return (
    <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Product Categories"
          subtitle="Browse our comprehensive selection of healthcare products, organized by category for easy navigation"
          icon={Grid3X3}
        />
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
              {allCategories.map((category, index) => (
                <Link
                  key={index}
                  to={category.link}
                  className="flex flex-col items-center p-6 bg-[#f5f7fa] rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 h-72"
                >
                  <div className="p-3 bg-white rounded-full shadow-sm">
                    {category.icon}
                  </div>
                  <h3 className="mt-5 text-xl font-semibold text-[#0e4c92] text-center min-h-[3.5rem] flex items-center">
                    {category.title}
                  </h3>
                  <p className="mt-2 text-center text-gray-600 flex-1 flex items-center">
                    {category.description}
                  </p>
                  <span className="mt-4 text-[#5cb8b2] font-medium">
                    View Products →
                  </span>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
};